<template>
	<view>
		 <u-navbar leftText="返回" title="搜索" @rightClick="getGoods"  :autoBack="true" > </u-navbar>
		 <view class="search-info">
			 <u-search placeholder="请输入关键字,商品名称,香型,品牌" v-model="searchInfo" @search="getGoods" @custom="getGoods"></u-search>
		 </view>
		 <view class="flex-col now" v-for="(item, index) in processList" :key="item.id">
		 	<view class="flex-row now-phone">
		 		<view class="flex-row group_4">
		 			<image :src="item.format_image" class="image_5" />
		 			<view class="flex-col group_5">
		 				<text class="text_5 u-line-1">{{item.name}}</text>
		 				<view class="brand-cargory flex-row">
		 					<view class="flex:1;">
		 						<view class="text_6">香型：{{item.type.name}}</view>
		 						<view class="text_6">品牌：{{item.brand}}</view>
		 					</view>
		 					<view @click="toRecovery(item)" class="flex-col items-center text-wrapper">
		 						<text>回收寄卖</text>
		 					</view>
		 				</view>
		 				<view class="flex-row" style="align-items: flex-end;">
		 					<text class="text_6">预估回收寄卖价格：</text>
		 					<block v-if="item.remain_pric && item.remain_pric>0">
		 						<text class="text_7">￥</text>
		 						<text class="text_8">{{item.remain_pric && item.remain_pric>0?item.remain_pric:"暂未定价"}}</text>/
		 						<text class="text_5">{{item.is_best?'箱':'瓶'}}</text>
		 					</block>
		 					<view class="kf" v-else><button open-type="contact" class="servive-btns">
		 						联系客服议价
		 					</button></view>
		 					
		 				</view>
		 			</view>
		 		</view>
		 		
		 	</view>
		 	<view class="flex-row robot">
		 		<text class="text_6">{{item.goods_desc}}</text>
		 	</view>
		 </view>
	</view>
</template>

<script>
	import {getSearchList,getSort} from '@/api/index.js'
	export default {
		data() {
			return {
				searchInfo:'',
				processList:[],
				categoryList:[],
			}
		},
		onLoad() {
		},
		methods: {
			
			getGoods(){
				console.log("请求")
				getSearchList({
					keywords:this.searchInfo
				}).then(res=>{
					console.log(res);
					this.processList = res.data.data
				})
				
			},
			rightClick(){
				console.log("进来")
			},
			
			
			
			toRecovery(item){
				let url = `/pages/recovery/recovery?data=${encodeURIComponent(JSON.stringify(item))}`
				// vk.navigateTo(url);
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.search-info{
	margin: 20rpx 40rpx;
	width: calc(100% - 80rpx);
}
.now {
	margin: 20rpx 30rpx 10rpx;
	padding: 20rpx 28rpx 0 28rpx;
	background-color: rgb(255, 255, 255);
	box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.05);
	border-radius: 16rpx;
	.now-phone {
		margin-top: 18rpx;
	
		.group_4 {
			flex: 1 1 auto;
	
			.image_5 {
				border-radius: 10rpx;
				width: 120rpx;
				height: 162rpx;
			}
	
			.group_5 {
				margin-left: 20rpx;
				flex: 1 1 auto;
				.brand-cargory{
					align-items: center;
					justify-content: space-between;
					.text-wrapper{
						width: 160rpx;
					}
				}
				.text_5 {
					width: 100%;
					color: rgb(34, 34, 34);
					font-size: 30rpx;
					font-weight: 500;
					line-height: 33rpx;
					white-space: nowrap;
				}
	
				.text_6 {
					margin-top: 10rpx;
					color: rgb(153, 153, 153);
					font-size: 20rpx;
					line-height: 28rpx;
					white-space: nowrap;
				}
	
				.text_7 {
					margin-top: 26rpx;
					color: rgb(0, 199, 133);
					font-size: 24rpx;
					font-weight: 500;
					line-height: 33rpx;
					white-space: nowrap;
				}
	
				.text_8 {
					color: rgb(0, 199, 133);
					font-size: 43rpx;
					font-weight: 600;
					line-height: 55rpx;
					letter-spacing: -0.5rpx;
					white-space: nowrap;
				}
			}
		}
	
		.text-wrapper {
			margin-left: 10rpx;
			padding: 13rpx 0 14rpx;
			color: rgb(255, 255, 255);
			font-size: 24rpx;
			line-height: 33rpx;
			white-space: nowrap;
			background-color: rgb(0, 199, 133);
			box-shadow: 0px 2rpx 20rpx 0px rgba(0, 151, 101, 0.2);
			border-radius: 30rpx;
			width: 150rpx;
			height: 59rpx;
		}
	}
	.robot {
		margin-top: 13rpx;
		padding: 23rpx 0 16rpx;
		border-top: solid 2rpx rgb(238, 238, 238);
		.text_6 {
			color: rgb(153, 153, 153);
			font-size: 20rpx;
			line-height: 28rpx;
			white-space: nowrap;
		}
		.image_6 {
			width: 30rpx;
			height: 30rpx;
		}
	
		.group_7 {
			margin-left: 6rpx;
			line-height: 28rpx;
			white-space: nowrap;
			height: 28rpx;
	
			.text_10 {
				color: rgb(153, 153, 153);
				font-size: 20rpx;
				line-height: 28rpx;
			}
	
			.text_11 {
				color: rgb(0, 199, 133);
				font-size: 20rpx;
				font-weight: 500;
				line-height: 28rpx;
			}
		}
	}
}
.servive-btns{
		background: transparent;
		padding: 10rpx;
		line-height: 20rpx;
		color: #00C785;
		&::after{
			border: none;
		}
	}
</style>
